<template>
  <div class="god-share-cpt">
    <!-- TODO 小程序换成popup -->
    <van-popup v-model="showShare" round position="bottom">
      <div class="share-wrap">
        <p class="share-title">邀请好友参加活动</p>
        <div class="share-options">
          <div class="share-option" v-for="(option, index) in options" :key="index" @click="onSelectItem(option)">
            <template v-if="index == 0">
              <wx-button open-type="share" class="share-button">
                <img class="share-icon" :src="option.icon"/>
                <p class="share-name">{{option.name}}</p>
              </wx-button>
            </template>
            <template v-else>
              <img class="share-icon" :src="option.icon"/>
              <p class="share-name">{{option.name}}</p>
            </template>
          </div>
        </div>
        <p class="share-cancel" @click="showShare = false">取消</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
/**
 * 自定义商品分享 cpt
 * @author gaogm
 */

import Vue from 'vue'
import { ShareSheet } from 'vant'
Vue.use(ShareSheet)

export default Vue.extend({ 
  name: 'god-share-cpt',
  props: {},
  data() {
    return {
      showShare: false,
      options: [
        { name: '立即分享', icon: 'http://img.wifenxiao.com/16/79/6/2020-07/5efc9621d744c.png', key: '1' },
        { name: '分享海报', icon: 'http://img.wifenxiao.com/16/79/6/2020-07/5efc9621d7ad0.png', key: '2' }
      ],
      copyCnt: '',
      shareUrl: location.href,
      mallParam: {}
    }
  },
  mounted() {
    this.mallParam = this.$route.query
  },

  methods: {
    onSelectItem(opt) {
      this.showShare = false
      switch (opt.key) {
        case '1':
          // console.log(opt,1111)
          break
        case '2':
          this.$emit('shareCode')
          break
      }
    }
  }
})
</script>

<style lang="scss">
.god-share-cpt {
  width: 100%;
  box-sizing: border-box;
  .share-wrap {
    background: #f7f8fa;
    .share-title {
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 28px;
      background: #fff;
      border-bottom: 1px solid #ededed;
    }
    .share-options {
      position: relative;
      display: flex;
      padding: 32px 0 32px 16px;
      overflow-x: auto;
      overflow-y: visible;
      background: #fff;
      margin-bottom: 8px;
      .share-button {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .button-hover {
        background: #fff;
      }
      .share-option {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 96px;
          height: 96px;
        }
        p {
          color: #333;
          font-size: 26px;
          font-weight: 500;
          margin-top: 16px;
          padding: 0 8px;
        }
      }
    }
    .share-cancel {
      width: 100%;
      text-align: center;
      font-size: 32px;
      line-height: 96px;
      background: #fff;
    }
  }
}
</style>
